<template>
  <el-dialog
    title="题目预览"
    :visible="questionVisible"
    @close="close"
    @open="open"
    width="900px"
  >
    <el-row>
      <el-col :span="6">【题型】：{{ questionTypeemun }}</el-col>
      <el-col :span="6">【编号】：{{ rowList.id }}</el-col>
      <el-col :span="6">【难度】：{{ difficultyemun }}</el-col>
      <el-col :span="6">【标签】：{{ rowList.tags }}</el-col>
      <el-col :span="6">【学科】：{{ rowList.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ rowList.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ rowList.direction }}</el-col>
    </el-row>
    <hr />
    <div>【题干】：</div>
    <div v-html="rowList.question"></div>
    <div>多选题 选项：（以下选中的选项为正确答案）</div>
    <div
      v-for="item in rowList.options"
      :key="item.code"
      style="padding: 4px 2px"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox disabled :label="item.code">{{ item.title }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <hr />
    <div>
      【参考答案】：<el-button type="danger" size="small" @click="isVideo = true"
        >视频答案预览</el-button
      >
      <div class="video" v-if="isVideo">
        <video :src="rowList.videoURL" controls width="400" height="300" autoplay loop muted></video>
        </div>
    </div>
    <hr />
    <div>
      【答案解析】：
      <div v-html="rowList.answer"></div>
    </div>
    <hr>
    <div>【题目备注】：{{ rowList.remarks }}</div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    questionVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      id: '',
      rowList: {},
      difficulty,
      questionType,
      checkList: [],
      isVideo: false
    }
  },
  computed: {
    difficultyemun () {
      return this.difficulty.find(
        item => item.value === this.rowList.difficulty
      )?.label
    },
    questionTypeemun () {
      return this.questionType.find(
        item => item.value === this.rowList.questionType
      )?.label
    }
  },
  methods: {
    close () {
      this.$emit('update:questionVisible', false)
    },
    async open () {
      try {
        const { data } = await detail({ id: this.id })
        this.rowList = data
        data.options
          .filter(item => item.isRight === 1)
          .forEach(e => this.checkList.push(e.code))
      } catch (e) {
        console.log(e)
        this.$message({ type: 'warning', message: '服务器没信息！' })
      }
    }
  }
}
</script>

<style scoped lang='less'>
  .el-row {
    font-size: 16px;
    .el-col {
      margin-bottom: 20px;
    }
  }
  /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #606266;
  }
  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #409eff !important;
  }
  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #409eff;
    border-color: #409eff;
  }
  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
  }
</style>
